<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>班级管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		
		<link rel="stylesheet" type="text/css" href="../../../css/popups/fy-alert.css">
		<link rel="stylesheet" type="text/css" href="../../../css/popups/demo.css">
		
		<link rel="stylesheet" href="../../../css/Semantic/semantic.min.css" />
		<link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
		<script src="../../../js/vue/vue.js"></script>
		<style>
			.container {
				padding-top: 10px;
				margin-left: 10px;
				
			}

			#zth-top-icon {
				font-size: 25px;
				width: 50px;
				cursor: pointer;
			}
			.zth-top-text{
				border-bottom: 2px #009E94 solid;
				line-height: 30px;
				padding-left: 20px;
				font-size: 18px;
				font-family: "楷体";
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="zth-top-text">班级管理</div>
			<div class="container">
				<div class="demoTable">
					<div class="zth-zth-icons">
					<script type="text/html" id="toolbarDemo">
							<i class="plus icon add" lay-event="add" id="zth-top-icon"></i>
							<i class="edit icon" lay-event="edit" id="zth-top-icon"></i>
							<i class="trash alternate outline icon" lay-event="delBatch" id="zth-top-icon"></i>
					</script>
						<div class="layui-inline">
							<div class="layui-input-inline">
								<input class="layui-input" placeholder="输入班级名关键字"  name="zname" id="zname" autocomplete="off">
							</div>
						</div>
						<div class="layui-inline">
							<div class="layui-input-inline">
								<button class="layui-btn" data-type="reload"><i class="search icon" style="font-size: 20px; color:#cccccc"></i></button>
							</div>
						</div>
					</div>
				</div>
				<table class="layui-hide" id="test" lay-filter="test"></table>
			</div>
		</div>
		<script src="../../../layui/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
		
		<!-- 弹出层 -->
		<script src="../../../js/jquery.min.js"></script>
		<script src="../../../js/popups/fy-alert.js"></script>
		
		<script>
		function demo2(){ fyAlert.msg("上方弹出弹框",{icon:2,animateType:2} )};
		
			layui.use(['table', "layer", "jquery"], function() {
				var table = layui.table;

				var $ = layui.jquery;
				var layer = layui.layer;

				//方法级渲染
				table.render({
					elem: '#test',
					url: '/grade/findAll',
					toolbar : '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
					id : 'testReload',
					cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
						
					cols: [
						[{
								type: 'checkbox'
							}, {
								field: 'zname',
								title: '班级名',
							}, 
							 {
								field: 'teacher_id',
								title: '班主任',
								 templet: function(d){
									 var name;
									 $.ajax({
										 url:'/teacher/findbyId',
										 data:{teacher_id:d.teacher_id},
										 type:'get',
										 async:false,
										 success:function(res){
											 name=res.data.name
										 }
									 });
									 return name;
								 }
							}
				
				
						]
					],
					page: true,//開啟分頁
					
					parseData: function(res) { 
						//将原始数据解析成 table 组件所规定的数据
						return {
							"code": 0, //解析接口状态
							"msg": res.message, //解析提示文本
							"count": res.count, //解析数据长度
							"data": res.list //解析数据列表
						};
					}
				});
				
				//头工具栏事件
							table.on('toolbar(test)', function(obj) {
								var checkStatus = table.checkStatus(obj.config.id);
								var data = checkStatus.data;
								switch (obj.event) {
								case 'add':
								
									layer.open({
									      type: 2,
									      title: '添加',
									      //time :20000,
									      anim: 2,//弹出效果
									      maxmin: true,//最大化按钮
									      shade:[0.3, '#393D49'],//遮罩
									      skin: 'layui-layer-molv',//类样式
									      shadeClose: true, //点击遮罩关闭层
									      area : ['100%' , '300px'],//大小
									      content: 'add.html',//内容
									      scrollbar :true,//是否允许浏览器出现滚动条
									      offset: [0,0]//坐标
									});
									break;
								case 'delBatch':
									if (data.length == 0) {
										layer.msg('请选择要删除的数据');
									} else {
										layer.confirm('真的删除行么', function(index) {
											layer.close(index);
											//删除数据逻辑
											//获取要删除数据的id
											var ids = [];
											for (var i = 0; i < data.length; i++) {
												ids.push(data[i].grade_id);
											}
											console.log(ids);
											$.ajax({
												url : "/grade/delbatch",
												data : {
													"id" : ids,
												},
												success : function(req) {
													if (req > 0) {
														layer.alert("删除成功！");
														//执行重载
														table.reload('testReload');
													} else {
														layer.alert("删除失败！");
													}
												}
											}); 
										});
									}
				
									break;
								case 'edit':
									if(data.length==1){
									layer.open({
									      type: 2,
									      title: '编辑',
									      //time :20000,
									      anim: 2,//弹出效果
									      maxmin: true,//最大化按钮
									      shade:[0.3, '#393D49'],//遮罩
									      skin: 'layui-layer-molv',//类样式
									      shadeClose: true, //点击遮罩关闭层
									      area : ['100%' , '300px'],//大小
									      content: 'edit.html?grade_id='+data[0].grade_id,//内容
									      scrollbar :true,//是否允许浏览器出现滚动条
									      offset: [0,0]//坐标
									});
									}else{
										layer.msg("请选择一个进行编辑！");
									}
									break
								};
							}); 


				var active = {
					reload: function() {
						//执行重载
						table.reload('testReload', {
							page: {
								curr: 1
								//重新从第 1 页开始
							},
							where: {
								zname: $("#zname").val()
							}
						}, 'data');
					}
				};
				
				//搜索按钮的点击事件
				$('.demoTable .layui-btn').on('click', function() {
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';
				});


			});
		</script>

	</body>
</html>
